<template>
  <!-- 播放器页面 -->
  <div class="player">
    <!-- 头部 -->
    <van-nav-bar
      title="标题"
      left-arrow
      @click-left="onClickLeft"
      style="box-shadow: 0px -1px 5px 2px rgba(0, 0, 0, 0.5)"
    >
      <template #right>
        <van-icon
          name="share-o"
          size="24px"
          color="gray"
          @click="showShare = true"
        />
      </template>
    </van-nav-bar>
    <!-- 分享 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 身体 高447px -->
    <div class="inner" v-show="Switch" @click="tt()">
      <!-- 播放球 -->
      <div class="inner_outer">
        <div class="inner_inside">
          <img
            src="https://img0.baidu.com/it/u=431310748,1064380593&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
        </div>
      </div>
      <!-- 身体分类 -->
      <div class="inner_sort">
        <ul>
          <li><van-icon name="like-o" /></li>
          <li><van-icon name="down" /></li>
          <li>
            <van-icon name="comment-o" @click="gotolink" />
          </li>
          <li><van-icon name="ellipsis" /></li>
        </ul>
      </div>
    </div>
    <div class="inners" v-show="!Switch" @click="tt()">
      <div class="inners_top">
        <ul>
          <li style="width: 30px"><van-icon name="volume" /></li>
          <li style="width: 222px">
            <van-progress color="gray" :percentage="1" />
          </li>
          <li style="width: 30px"><van-icon name="video-o" /></li>
        </ul>
      </div>
      <!-- 歌词展示 -->
      <div class="inners_body">
        <div class="lrc" ref="lrc">
          <p
            class="lrc-p"
            :class="{
              active:
                currentTime > allKeys[index] &&
                currentTime < allKeys[index + 1],
            }"
            v-for="(item, key, index) in lrcData"
            :key="index"
          >
            <span>{{ item }}{{ scrollLRC(index) }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="video">
      <audio :src="audiourl" ref="player" autoplay loop controls></audio>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";
export default {
  data() {
    return {
      Switch: true,
      audiourl: "",
      lrcData: "",
      lyric: "",
      currentTime: 0,
      allKeys: [],
      //分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    tt() {
      this.Switch = !this.Switch;
    },
    //指定跳转地址
    onClickLeft() {
      this.$router.push("/boke");
    },

    gotolink() {
      //指定跳转地址
      this.$router.replace("/pinglun");
    },
    //分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // 获取歌曲
    initAudio() {
      axios
        .get("http://192.168.1.107:3000/song/url?id=" + this.$route.params.id)
        .then((res) => {
          console.log(res);
          this.audiourl = res.data.data[0].url;
          console.log(222, this.audiourl);
          this.initGeci();
          this.name = res.data.data.name;
          console.log(name);
        });
    },
    // 获取歌词
    initGeci() {
      axios
        .get("http://192.168.1.107:3000/lyric?id=" + this.$route.params.id)
        .then((res) => {
          console.log("歌词", res.data.lrc.lyric);
          this.lyric = res.data.lrc.lyric;
          this.filterLRC(this.lyric);
        });
    },
    filterLRC(values) {
      if (!values) return;
      var lrc = {};
      var lyrics = values.split("\n");
      var reg = /\[\d*:\d*(\.|:)\d*]/g;
      for (var i = 0; i < lyrics.length; i++) {
        var timeRegArr = lyrics[i].match(reg);
        if (!timeRegArr) continue;
        var content = lyrics[i].replace(timeRegArr, "");
        // console.log('content',content)
        var t = timeRegArr[0];
        var min = parseInt(t.match(/\[\d*/i).toString().slice(1));
        var sec = parseInt(t.match(/:\d*/i).toString().slice(1));
        var time = min * 60 + sec;
        lrc[time] = content;
      }
      this.lrcData = lrc;
      this.getAllkeys(lrc);
      console.log(this.lrcData);
    },
    // 获取音乐播放时间
    // 1音乐总时长，音乐正在播放的时间
    addEventHandle() {
      this.$refs.player.addEventListener("timeupdate", this.currentTimeHandle);
    },
    currentTimeHandle() {
      this.currentTime = this.$refs.player.currentTime;
    },
    removeEventHandle() {
      this.$refs.player.removeEventListener(
        "timeupdate",
        this.currentTimeHandle
      );
    },
    //
    getAllkeys(lrcArr) {
      for (var key in lrcArr) {
        this.allKeys.push(key);
      }
      console.log(this.allKeys);
    },
    scrollLRC(index) {
      if (
        this.currentTime > this.allKeys[index] &&
        this.currentTime < this.allKeys[index + 1]
      ) {
        this.$refs.lrc.style.top = -(30 * (index - 2)) + "px";
      }
    },
  },
  created() {
    this.initAudio();
  },
  mounted() {
    this.addEventHandle();
  },
  // 组件销毁的时候把监听事件移除
  beforeDestroy() {
    this.removeEventHandle();
  },
  components: {},
};
</script>
<style scoped>
.player {
  position: relative;
  /* box-shadow: 0px -1px 5px 2px rgba(0, 0, 0, 0.5); */
}
/* 身体 */
.inner,
.inners {
  height: 447px;
  width: 100%;
  position: relative;
}
.inner {
  margin-top: 22px;
}
.inner_outer {
  display: flex;
  height: 210px;
  width: 210px;
  background-color: black;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inner_inside {
  width: 136px;
  height: 136px;
  background-color: white;
  border-radius: 50%;
}
.inner_inside img {
  width: 100%;
  border-radius: 50%;
}
.inner_sort {
  width: 214px;
  height: 24px;
  /* background-color: goldenrod; */
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.inner_sort ul {
  display: flex;
  justify-content: center;
}
.inner_sort ul li {
  width: 20%;
  margin: 0 auto;
}
.van-icon-like-o,
.van-icon-down,
.van-icon-comment-o,
.van-icon-ellipsis,
.van-icon-volume,
.van-icon-video-o {
  font-size: 24px;
  color: gray;
}
/* 底部播放 */
.video {
  height: 94px;
  display: flex;
  justify-content: center;
}
/* 顶部声音 */
.inners_top {
  width: 282px;
  /* background-color: aqua; */
  height: 24px;
  margin: 0 auto;
  margin-top: 22px;
}
.inners_top ul {
  display: flex;
  justify-content: center;
}
.inners_top ul li {
  /* border: 1px solid #ccc; */
  height: 100%;
  line-height: 24px;
}
.inners_top ul li .van-progress {
  line-height: 24px;
  margin: 10px;
}
/* 歌词展示 */
.inners_body {
  height: 385px;
  width: 248px;
  margin: 0 auto;
  margin-top: 24px;
  text-align: center;
  width: 100%;
  overflow: scroll;
  position: relative;
}
.lrc {
  width: 100%;
  position: absolute;
  top: 0;
}
.lrc-p {
  height: 30px;
  line-height: 30px;
}
.up30 {
  margin-top: -30px;
}
.active {
  color: red;
}
/* 头部 */
van-icon {
  color: gray;
}
</style>
